import 'package:flutter/material.dart';
import 'package:flutter_douban/config/app_colors.dart';
import 'package:flutter_douban/main_page/store/page/shopping_cart_page.dart';
import 'package:flutter_douban/main_page/store/provider/store_count_model.dart';
import 'package:provider/provider.dart';

class StoreNavView extends StatefulWidget {
  const StoreNavView({Key? key}) : super(key: key);

  @override
  _StoreNavViewState createState() => _StoreNavViewState();
}

class _StoreNavViewState extends State<StoreNavView> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.topEnd,
      children: [
        Container(
          color: Colors.white,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).padding.top + kToolbarHeight,
          padding: EdgeInsets.only(left: 5,right: 2),
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Image(
                    image: AssetImage(
                        "assets/images/common/button_search_gray.png"),
                    fit: BoxFit.cover,
                    width: 20,
                    height: 20,
                    color: AppColors.black,
                  ),
                  IconButton(
                      alignment: Alignment.centerRight,
                      onPressed: () {
                        Navigator.of(context)
                            .push(MaterialPageRoute(builder: (_) {
                          return ShoppingCartPage();
                        }));
                      },
                      icon: Image(
                        image: AssetImage(
                            "assets/images/common/navi_item_cart@2x.png"),
                        fit: BoxFit.cover,
                        width: 24,
                        height: 24,
                        color: AppColors.black,
                      )),
                ],
              ),
              Positioned(
                  child: Center(
                child: Text(
                  '商城',
                  style: TextStyle(
                    color: AppColors.black,
                    fontSize: 16,
                  ),
                ),
              ))
            ],
          ),
        ),
        Positioned(
            top: MediaQuery.of(context).padding.top,
            right: 0,
            child: Container(
              alignment: Alignment.center,
              width: 16,
              height: 16,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: AppColors.danger),
              child: Text(
                "${Provider.of<StoreCountModel>(context).count}",
                style: TextStyle(color: Colors.white, fontSize: 10),
              ),
            ))
      ],
    );
  }
}
